<template>
	<view class="cont">
		<view class="cont-body">
			<view class="cont-header fixedHeader">
				<!-- 这里是状态栏 -->
				<view class="status_bar"></view>
				<view class="title">
					<uni-icons @click="gotoBack()" class="back" color="#FFFFFF" type="back" size="22" />
					<uni-icons class="right" color="#FFFFFF" type="more-filled" size="22" />
				</view>
			</view>
			
			<view class="cont-head">
				<view class="cont-head-name">
					<text>{{details.NAME}}</text>
				</view>
			</view>
			
			<view class="from">
				<view class="from-list">
					<view class="from-list-cell">
						<view class="from-text">
							<view class="from-text-lable">
								<text>企业/组织</text>
							</view>
							<view class="from-text-cont">
								<text>宁南县软云软件开发有限公司</text>
							</view>
						</view>
					</view>
					<view class="from-list-cell">
						<view class="from-text">
							<view class="from-text-lable">
								<text>姓名</text>
							</view>
							<view class="from-text-cont">
								<text>{{details.NAME}}</text>
							</view>
						</view>
					</view>
					<view class="from-list-cell from-list-phone">
						<view class="from-text">
							<view class="from-text-lable">
								<text>电话</text>
							</view>
							<view class="from-text-cont from-text-phone">
								<text>{{details.phone}}</text>
								<image src="/static/icon-phone.png" mode="aspectFill"></image>
							</view>
						</view>
					</view>
					<view class="from-list-cell">
						<view class="from-text">
							<view class="from-text-lable">
								<text>部门</text>
							</view>
							<view class="from-text-cont">
								<text>运营部</text>
							</view>
						</view>
					</view>
					
				</view>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	import API from '../../common/api.js';
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	
	export default {
		components: {
			uniIcons
		},
		data: function () {
	        return {
				navTitle: "员工详情",
				details: {}
	        }
	    },
		onLoad:function(option){
			uni.setNavigationBarColor({
			    frontColor: '#ffffff',
			    backgroundColor: '#ff0000',
			    animation: {
			        duration: 400,
			        timingFunc: 'easeIn'
			    }
			});
			
			this.details = JSON.parse(decodeURIComponent(option.details));
		},
		methods:{
			gotoBack(){
				uni.navigateBack({
				    delta: 1
				});
			}
		}
	}
</script>

<style>
	@import "../../common/uni.css";
	
	page{
		height: 100%;
		background-color: #e5e5e5;
	}
	.cont-body{
		padding-bottom: 120upx;
	}
	
	.cont-header{
		width: 100%;
	}
	.fixedHeader.cont-header{
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10000;
	}
	.cont-header .status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}
	.cont-header .title{
		height:98upx;
		text-align: center;
		font-size:28upx;
		line-height:98upx;
		color: #333333;
		position:relative;
		font-weight: bold;
	}
	.cont-header .title .right{color:#b5b5b5;font-size:30upx;position:absolute;right:30upx;top:0;}
	.cont-header .title .back{position:absolute;left:20upx;top:0;}
	
	
	.from{
		margin-top: 30upx;
	}
	.from-list{
		position: relative;
		background-color: #FFFFFF;
		padding-left: 30upx;
	}
	.from-list:after{
		content: "";
		display: block;
		width: 100%;
		height: 2upx;
		background-color: #EFEFEF;
		position: absolute;
		left: 0;
		top: 0;
	}
	.from-list:nth-child(n+2){
		margin-top: 30upx;
	}
	.from-list-cell{
		padding: 20upx 0;
		position: relative;
	}
	.from-list-cell:after{
		content: "";
		display: block;
		width: 100%;
		height: 2upx;
		background-color: #EFEFEF;
		position: absolute;
		left: 0;
		bottom: 0;
	}
	.from-list-cell:nth-child(2):after{
		background-color: #DDDDDD;
	}
	
	.from-text .from-text-lable{
		color: #ABABAB;
	}
	.from-text .from-text-cont{
		font-size: 36upx;
		color: #393B3B;
	}
	.from-list-cell .from-text-phone image{
		width: 50upx;
		height: 50upx;
		position: absolute;
		top: 0;
		bottom: 0;
		right: 60upx;
		margin: auto;
	}
	
	
	
	.cont-head{
		height: 500upx;
		background-color: #1F5A94;
		position: relative;
		top: - var(--status-bar-height);
	}
	
	.cont-head-name{
		font-size: 56upx;
		font-weight: bold;
		color: #FFFFFF;
		position: absolute;
		left: 30upx;
		bottom: 120upx;
	}
	
	
	
	
</style>
